<template>
    <div class="easyd-weixin-Box">
        <div class="sendPrivateBox">
            <div class="sendPrivateSelect">
                <input type="text" readonly placeholder="请选择私信模板" @click="goSelectPrivateTemplate" />
                <div class="rightIcon"><i class="fa fa-angle-right fa-lg"></i></div>
            </div>
            <div class="sendPrivateTitle"><i class="fa fa-send fa-lg"></i>私信发送所需信息</div>
            <div class="addShopInput">
                <input type="text" placeholder="请输入商品名称" />
            </div>
            <div class="addShopInput">
                <input type="text" placeholder="请输入商品价格" />
            </div>
            <div class="addShopTextArea">
                <textarea placeholder="请输入私信内容"></textarea>
            </div>
        </div>
        <div class="sendPrivateBottomMenuBox">
            <div class="sendPrivateBottomMenuItem">详情预览</div>
            <div class="sendPrivateBottomMenuItem" style="border-left:1px solid #fff">提交操作</div>
        </div>
    </div>
</template>

<script>
export default {
    methods : {
        goSelectPrivateTemplate(){
            this.$router.push({
                path : '/selectPrivateTemplate'
            })
        }
    }
}
</script>

<style lang="stylus" scoped>
.sendPrivateBox{
    position absolute
    top 0px
    bottom 50px
    left 0px
    right 0px
    padding-left 15px
    padding-right 15px
    font-size 16px
    overflow auto
    box-sizing border-box
    -webkit-overflow-scrolling : touch;

    .addShopTextArea {
        width 100%
        height 150px;
        background #fff
        border-radius 5px    
        margin-bottom 10px
        overflow hidden
        

        textarea {
            width 100%
            height 100%
            padding 10px 15px
            box-sizing border-box
            -webkit-appearance: none;
            border 1px solid #eee
            outline none
        }
    }

    .addShopInput {
        width 100%
        height 45px;
        background #fff
        border-radius 5px    
        margin-bottom 10px
        overflow hidden
        position relative
        margin-top 10px

        input {
            width 100%
            height 100%
            padding 15px
            box-sizing border-box
            -webkit-appearance: none;
            border 1px solid #eee
            outline none
        }
    }

    .sendPrivateTitle {
        width 100%
        height 30px
        line-height 30px
        margin-top 20px
        text-indent 5px

        i {
            font-size 16px
            color #999
            position relative
            top -1px
            right 5px
        }
    }

    .sendPrivateSelect {
        width 100%
        height 45px;
        background #fff
        border-radius 5px    
        margin-bottom 10px
        overflow hidden
        margin-top 15px
        position relative

        input {
            width 100%
            height 100%
            padding 15px
            box-sizing border-box
            padding-right 50px
            -webkit-appearance: none;
            border 1px solid #eee
            outline none
        }

        .rightIcon {
            width 30px
            position absolute
            height 45px
            right 0px
            color #999
            text-align center
            line-height 45px
            top 0px  
        }

    }
}

.sendPrivateBottomMenuBox {
    position absolute
    bottom 0px
    height 50px
    left 0px
    right 0px
    background #eee   
    display flex 
    justify-content: space-between;

    .sendPrivateBottomMenuItem {
        width 50%
        height 50px
        text-align center
        line-height 50px
        background: #FDDE6E;
    }
}
</style>
